<template>
  <el-carousel :interval="40000" height="750px">

    <el-carousel-item v-for="(img, index) in imageUrls" :key="index" @click="toPage(img.name)"><!---->

      <img :src="img.url" alt="carousel image" class="carousel-image">

    </el-carousel-item>
  </el-carousel>
</template>


<script lang="ts" setup>
import {useRouter} from 'vue-router';

const props = defineProps<{
  imageUrls: { url: string; name: string }[];
}>();

const router = useRouter();

function toPage(name: string) {
  router.push({path: '/traditional', query: {name: name}});
}
</script>


<style scoped>
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto; /* 使图片水平居中 */
}
</style>
